<template>
  <div class="compare-container">
    <!-- 输入框1 -->
    <div>
      <label for="number1">请输入数字1：</label>
      <input
        type="number"
        id="number1"
        v-model.number="number1"
        placeholder="请输入数字"
      />
    </div>

    <!-- 输入框2 -->
    <div>
      <label for="number2">请输入数字2：</label>
      <input
        type="number"
        id="number2"
        v-model.number="number2"
        placeholder="请输入数字"
      />
    </div>

    <!-- 比较按钮 -->
    <button @click="compareNumbers">比较</button>

    <!-- 结果显示 -->
    <div v-if="result" class="result">
      <p>{{ result }}</p >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number1: null, // 绑定数字1
      number2: null, // 绑定数字2
      result: null,  // 用于存储比较结果
    };
  },
  methods: {
    compareNumbers() {
      // 检查输入是否为空
      if (this.number1 === null || this.number2 === null) {
        this.result = "请输入两个数字！";
        return;
      }

      // 比较数字大小
      if (this.number1 > this.number2) {
        this.result = `数字1（${this.number1}）大于数字2（${this.number2}）`;
      } else if (this.number1 < this.number2) {
        this.result = `数字1（${this.number1}）小于数字2（${this.number2}）`;
      } else {
        this.result = `数字1（${this.number1}）等于数字2（${this.number2}）`;
      }
    },
  },
};
</script>

<style scoped>
.compare-container {
  text-align: center;
  margin-top: 50px;
}

input {
  margin: 10px;
  padding: 5px;
}

button {
  padding: 10px 20px;
  cursor: pointer;
}

.result {
  margin-top: 20px;
  font-size: 1.2em;
  color: #333;
}
</style>

